
    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>OAuth2.0 - 学习卡片</title>
      <style>
        body { font-family: sans-serif; background-color: #f0f8ff; color: #333; display: flex; flex-direction: column; align-items: center; padding: 50px 20px; }
        .header h1 { font-size: 32px; }
        .grid-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; width: 100%; max-width: 1200px; }
        .card-container { perspective: 1200px; cursor: pointer; height: 250px; }
        .card { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transition: transform 0.7s; border-radius: 16px; box-shadow: 0 4px 16px rgba(0,0,0,0.08); }
        .card-container.flipped .card { transform: rotateY(180deg); }
        .card-face { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; display: flex; flex-direction: column; box-sizing: border-box; border-radius: 16px; background-color: #fff; padding: 24px; }
        .card-back { background-color: #f0fff4; transform: rotateY(180deg); justify-content: space-between; }
        .card-category { font-size: 14px; color: #0052d9; margin-bottom: 8px; font-weight: 500; }
        .card-question { font-size: 20px; font-weight: 500; flex-grow: 1; display: flex; align-items: center; justify-content: center; text-align: center; }
        .card-answer-wrapper { flex-grow: 1; overflow-y: auto; }
        .card-answer { font-size: 15px; line-height: 1.7; }
        .card-footer { font-size: 13px; color: #8a919f; border-top: 1px solid #f0f0f0; padding-top: 16px; margin-top: 16px; }
        .card-source { font-size: 13px; color: #8a919f; border-top: 1px solid #f0f0f0; padding-top: 12px; margin-top: 12px; }
      </style>
    </head>
    <body>
      <div class="header">
        <h1>OAuth2.0 - 学习卡片</h1>
      </div>
      <div class="grid-container">
        
    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">理论</div>
          <div class="card-question">什么是OAuth协议？它如何区分“认证”和“授权”？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">理论</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">OAuth（Open Authorization）是一种开放认证授权协议。文档中将其核心概念区分为：认证（Authentication），即验证用户的身份，如账号登录或指纹识别；授权（Authorization），即对用户进行访问控制，判断用户是否被允许执行某项操作。</div>
          </div>
          <div class="card-source">来源: OAuth是什么</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">机制</div>
          <div class="card-question">OAuth 2.0如何实现第三方应用对受保护资源的访问控制？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">机制</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">OAuth 2.0引入了一个授权环节。当第三方应用请求访问资源时，资源服务器在获得资源所有者（用户）的授权后，会向该应用颁发一个访问令牌（AccessToken）。此令牌包含了授权范围和有效期等信息，第三方应用必须在后续的资源访问中持有该令牌。</div>
          </div>
          <div class="card-source">来源: OAuth2.0有什么用</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">角色</div>
          <div class="card-question">在OAuth 2.0的授权流程中，涉及哪四个核心角色？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">角色</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">OAuth 2.0授权流程涉及四个核心角色：1. Resource Owner (资源所有者，即用户)；2. Authorization Server (授权服务器，负责验证身份并派发令牌)；3. Resource Server (资源服务器，托管受保护的用户信息)；4. Client (客户端，即请求访问资源的第三方应用)。</div>
          </div>
          <div class="card-source">来源: OAuth 2 的授权流程</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">模式</div>
          <div class="card-question">文档中提到了哪几种OAuth 2.0的授权模式？其中最常用的是哪一种？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">模式</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">文档中列举了五种授权模式：授权码模式（Authorization Code）、授权码简化模式（Implicit）、Pwd模式（Resource Owner Password Credentials）、Client模式（Client Credentials）和扩展模式（Extension）。其中，授权码模式被指为最常用的模式。</div>
          </div>
          <div class="card-source">来源: OAuth2.0有哪几种授权模式</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">技术</div>
          <div class="card-question">在使用百度账号进行OAuth授权时，引导用户登录的请求URL中，`client_id` 和 `redirect_uri` 这两个必须参数分别代表什么？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">技术</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">`client_id` 代表应用的API Key，是应用的唯一标识。`redirect_uri` 是在应用中设置的回调地址，用于在用户授权后接收授权码（code）。</div>
          </div>
          <div class="card-source">来源: 引导用户登录</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">技术</div>
          <div class="card-question">在成功引导用户授权并获得`code`后，下一步获取`Access Token`需要向哪个API端点发起请求？该请求中`grant_type`参数的固定值是什么？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">技术</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">需要向 `https://openapi.baidu.com/oauth/2.0/token` 端点发起请求。在该请求中，`grant_type` 参数是一个必须的参数，其值固定为 `authorization_code`。</div>
          </div>
          <div class="card-source">来源: 获取Access Token</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">工具</div>
          <div class="card-question">文档中介绍的JustAuth是什么？它旨在解决什么问题？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">工具</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">JustAuth是一个第三方授权登录的工具类库。它旨在让开发者脱离繁琐的第三方登录SDK，使集成第三方授权登录的过程变得非常简单。</div>
          </div>
          <div class="card-source">来源: JustAuth介绍</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">关键词</div>
          <div class="card-question">在OAuth流程中，`state`参数的主要作用是什么？它是由谁生成的？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">关键词</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">`state`参数是一个安全的随机参数，主要用于保持授权会话流程的完整性，并有效防止CSRF（跨站请求伪造）攻击。该参数由开发者（即发起授权请求的应用方）生成。</div>
          </div>
          <div class="card-source">来源: 关键词解释</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">关键词</div>
          <div class="card-question">在JustAuth的语境下，`clientId` 和 `clientSecret` 分别是什么，并且通常由谁提供？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">关键词</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">`clientId`是客户端的身份标识符（也称为应用id），而`clientSecret`是客户端的密钥。这两个凭证都是在开发者向第三方平台申请OAuth应用后，由第三方平台颁发的。</div>
          </div>
          <div class="card-source">来源: 关键词解释</div>
        </div>
      </div>
    </div>

      </div>
    </body>
    </html>
